<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view class="p-3">
		<view class="position-relative mt-1" v-for="(item,key) in cardList" :key="key" @tap="toDetail(item.id)">
			<view class="card-box">
				<view class="flex align-center">
					<image src="/static/images/mine/vip.png" class="vip-img"></image>
					<text class="ml-1">{{ item.name }}</text>
				</view>
				<view  class="font-price">{{ item.price }}元</view>
				<view  class="font-time">{{ item.period == 0 ? '永久有效' : item.period + '月有效期'}}</view>
				<view  class="font-more">更多特权</view>
			</view>
			<view class="cart-box-bg"><image :src="item.styleImg"></image></view>
		</view>
	</view>
</template>

<script setup>
import {
  ref
} from 'vue'
import { onShow} from '@dcloudio/uni-app'
import {
  getCardList
} from '@/api/user'



const title = ref('会员卡')
const cardList = ref([])

onShow(() => {
	getList();
})

const getList = async() => {
	let data = await getCardList();
	if (data) {
		cardList.value = data;
	}
}
const toDetail = (id) => {
	uni.navigateTo({
		url: '/pages/components/pages/vip/detail?id=' + id
	})
}

</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		background-color: transparent;
	}
	/* #endif */
	.card-box {
		color: #ffffff;
		height: 400rpx;
		padding: 30rpx;
		text-align: center;
		
		.font-price {
			margin-top: 50rpx;
			font-size: 50rpx;
		}
		.font-time {
			margin-top: 10rpx;
			font-size: 24rpx;
		}
		.font-more {
			margin-top: 80rpx;
			font-size: 24rpx;
		}
	
	}
	.vip-img {
		width: 40rpx;
		height: 40rpx;
	}
	.cart-box-bg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		
		image {
			width: 690rpx;
			height: 400rpx;
		}
	}
	
</style>
